import { usePersonContainer } from "./hooks/usePersonContainer";
import { usePersonReducer } from "./hooks/usePersonReducer";
import './index.css';
const PersonReducer = () => {
    const [state, dispatch] = usePersonReducer();
    const { onExit, setAge, setGroup, setName, setLoading } = usePersonContainer(state, dispatch);

    return <>
        <div className="row">
            <div className="prefix">Name:</div>
            <div className="content-detail">
                {state.name}
            </div>
            <div className="rest">
                <button onClick={() => setName('XXXXX')} className="bg-blue-500 hover:bg-blue-700 text-blue-800 py-2 px-4 rounded border-b-blue-700">Set Name</button>
            </div>
        </div>
        <div className="row">
            <div className="prefix">Age:</div>
            <div className="content-detail">
                {state.age}
            </div>
            <div className="rest">
                <button onClick={() => setAge(19)} className="bg-blue-500 hover:bg-blue-700 text-blue-800 py-2 px-4 rounded border-b-blue-700">Set Age</button>
            </div>
        </div>
        <div className="row">
            <div className="prefix">Group:</div>
            <div className="content-detail">
                {state.group.join(',')}
            </div>
            <div className="rest">
                <button onClick={() => setGroup(["G1", "G2"])} className="bg-blue-500 hover:bg-blue-700 text-blue-800 py-2 px-4 rounded border-b-blue-700">Set Group</button>
            </div>
        </div>
        <div className="row">
            <div className="prefix">Loading:</div>
             <div className="content-detail">
                {state.loading ? 'Loading...': "Loaded!"}
             </div>
            <div className="rest">
                <button onClick={() => setLoading(Math.random() > 0.5)} className="bg-blue-500 hover:bg-blue-700 text-blue-800 py-2 px-4 rounded border-b-blue-700">Set Loading</button>
            </div>
        </div>
        <div className="row">
            <div className="prefix">Exit:</div>
            <div className="content-detail"></div>
            <div className="rest">
                <button onClick={() => onExit()} className="bg-blue-500 hover:bg-blue-700 text-blue-800 py-2 px-4 rounded border-b-blue-700">Exit</button>
            </div>
        </div>
    </>;
};

export default PersonReducer;